<!--
 * @Date: 2020-08-07 11:30:21
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-24 17:50:27
 * @Description: 业务按钮的载体，维护这对外的数据和事件 传参只需要 menuInfos
-->

<template>
  <div class="bmp-menu-content">
    <transition name="el-fade-in-linear">
      <div class="bmp-menus-content">
        <bmpFirstMenus :menuInfos="menuInfos" @layerChange="layerChange"></bmpFirstMenus>
      </div>
    </transition>
  </div>
</template>
<script>
// 测试
import { directive } from 'vue-awesome-swiper'
import bmpFirstMenus from './bmpFirstMenus.vue'
export default {
  provide () {
    return {
      // 给一级的swipper传递的配置
      firstMenusSwiperOption: {
        slidesPerView: 5,
        spaceBetween: -10,
        centerInsufficientSlides: true,
        noSwiping: true,
        watchSlidesProgress: true,
        freeModeSticky: true
      },
      secondMenusSwiperOption: {
        direction: 'vertical',
        slidesPerView: 8,
        freeModeSticky: true,
        freeMode: false,
        mousewheel: true
      },
      // 给二级菜单状态改变的回调
      secondMenuStatusChange: this.secondMenuStatusChange
    }
  },
  props: {
    // menu的配置项
    menuInfos: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: { bmpFirstMenus },
  directives: {
    swiper: directive
  },
  mounted () {
    console.log('menuInfo', this.menuInfos)
  },
  methods: {
    // 外露的图层切换的事件
    secondMenuStatusChange (status, tag, firstTag) {
      this.$emit('layerChange', status, tag, firstTag)
    },
    layerChange (tag) {
      cosnole.log('tag', tag)
    }
  }
}
</script>
<style lang="scss" scoped>
.bmp-menu-content {
  position: relative;
  // position: absolute;
  height: 100%;
  width: 100%;
  // 这一层可以添加外部的样式
  .bmp-menus-content {
    position: relative;
    height: 100%;
    width: 100%;
  }
}

</style>
